<template>
	<div class="">
		<!--滚动内容 start-->
		<el-scrollbar class="app-container-scroll-bar">
			
			<pageTitle :title="pageTitle" :hasBack="true" ></pageTitle>
			
			<detailCard :data="cardData" icon-class="icon-network"></detailCard>
			
			<el-tabs type="border-card" style="margin:20px;">
			  <el-tab-pane label="内容管理">
			  	
			  	<neirongList ref="neirongList" :id="id" @command="listCommand"></neirongList>
			  	
			  </el-tab-pane>
			</el-tabs>
			
    </el-scrollbar>
    <!--滚动内容 end -->
		
		<!--弹窗内容 start-->
		<div class="app-output-window">
			
			<appdialog 
				ref="addFileDialog"
				:visible="false" 
				title="新建文件夹"
				@confirm="confirmAdd"
				width="30%"
				>
				
				<el-form 
					label-width="20px"
					>
				    
					<el-form-item label="">
						<img src="/static/img/file/file.png" style="vertical-align: middle;margin-right: 10px;" />
						<baseInput defaultValue="" placeholder="请输入文件夹名" @change="changeFileName" ref="wenjianname"></baseInput>
					</el-form-item>
					
				</el-form>
			</appdialog>
			
		</div>
		<!--弹窗内容 end-->
		
	</div>
</template>

<script>
import pageTitle from "@/view/layout/components/content/pageTitle";
import detailCard from "@/view/components/card/detailCard";
import neirongList from "./gongxiang/neirongList";
import { getShareDetail , createFile } from "@/service/swagger/ShareController";


import baseInput from "@/view/components/input/input";
import appdialog from "@/view/components/dialog/dialog";

export default {
	components: {
		pageTitle,
		detailCard,
		neirongList,
		baseInput,
		appdialog,
	},
	data() {
		return {
			id :this.$route.query.id || "",
			// 页面主标题
			pageTitle: "共享存储详情",
			cardData: null,
			cardConifg : {
				"name" : "空间名",
				"rongliang" : "容量",
				"creator" : "创建人",
				"createTime" : "创建时间",
			},
			
			addFileConfig : {
				fileName : "",
				filePath : "",
				fileType : 1 ,
				parentId : "",
				storeId : this.$route.query.id || "",
			}
		}
	},
	mounted() {
		this.initPage();
	},
	methods: {
		listCommand(command, row, index) {
			// console.log("列表进行了操作：", command,row,index );
			if (command && this[command]) {
				this[command](row, index);
			}
		},
		initPage() {

			getShareDetail({
				id: this.id ,
			}).then(ret => {
				let data = {};
				for(let i in ret.data){
					const _name = this.cardConifg[i]
					if(_name){
						data[_name] = ret.data[i];
					}
				}
				data[this.cardConifg["rongliang"]] = ret.data.usage + "/" + ret.data.size + ret.data.unit ;
				this.cardData = data;
			})

		},
		
		openAddFile(config){
			this.addFileConfig = {
				...this.addFileConfig,
				...config
			}
			this.$refs.addFileDialog.open();
		  this.$refs.wenjianname.reset()
		},
		changeFileName(name , v){
			console.log(name,v)
			this.addFileConfig.fileName = v ;
		},
		confirmAdd(){
			createFile(this.addFileConfig).then(ret=>{
				if(!ret.code){
					this.$refs.neirongList.refresh()
				}
			})
		},
		
	}
}
</script>

<style>
</style>